<template>
    <div class="layout">
       <Layout>
            <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed"
                :style="{height:'100vh'}"
            >
                <!-- <div class="layout-logo" :class="menuitemClasses">
                    后台管理
                </div> -->
                <Menu :active-name="active" theme="dark" width="auto" :class="menuitemClasses" @on-select="handleSelectMenu">
                    <template v-for="item in menuList">
                        <MenuItem :name="item.url">
                            <Icon :type="item.icon"></Icon>
                            <span>{{item.title}}</span>
                        </MenuItem>
                    </template>
                </Menu>
            </Sider>
            <Layout>
                <Header :style="{padding: 0}" class="layout-header-bar">
                    <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '20px 20px 0'}" type="navicon-round" size="24"></Icon>
                    <Breadcrumb class="breadcrumb">
                        <BreadcrumbItem v-for="(item,index) in location" :key="index" :to="item.path">
                            {{item.title}}
                        </BreadcrumbItem>
                    </Breadcrumb>
                    <div class="user-drop-down">
                        <div class="user-ivu-dropdown">
                            <Dropdown trigger="click" placement="bottom-end">
                                <a href="javascript:void(0)">
                                    Admin
                                    <Icon type="arrow-down-b"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem >
                                        <div @click="pwdModal=true">
                                            <Icon type="locked" style="margin-right:5px"></Icon>修改密码
                                        </div>
                                    </DropdownItem>
                                    <DropdownItem>
                                        <div @click="handleLogOut">
                                            <Icon type="log-out" style="margin-right:5px"></Icon>退出登录
                                        </div>
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
                    </div>
                </Header>
                <Content style="position:relative">
                    <div class="layout-content">
                        <router-view/>
                    </div>
                </Content>
                <Footer class="layout-footer-center">2011-2016 &copy; 启进科技网络有限公司</Footer>
            </Layout>
        </Layout>
        <Modal v-model="pwdModal" title="修改密码" @on-cancel="handleCancel">
            <Form ref="pwdForm" :model="pwdForm" :label-width="80" :rules="pwdRules">
                <FormItem label="原密码" prop="OldPassword">
                    <Input v-model="pwdForm.OldPassword" type="password" placeholder="请输入原密码"></Input>
                </FormItem>
                <FormItem label="新密码" prop="NewPassword">
                    <Input v-model="pwdForm.NewPassword" type="password" placeholder="请输入新密码"></Input>
                </FormItem>
                <FormItem label="确认密码" prop="VerifyPassword">
                    <Input v-model="pwdForm.VerifyPassword" type="password" placeholder="请再次确认密码"></Input>
                </FormItem>
            </Form>
            <div class="center" slot="footer">
                <Button type="primary" @click="editPassword">保存</Button>
                <Button type="ghost" @click="handleCancel('editPasswordModal','pwdForm')">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import util from "@/libs/util";
export default {
    data() {
        return {
            isCollapsed: false,
            pwdModal: false,
            menuList: [
                {
                    title: "首页",
                    icon: "home",
                    url: "home"
                },
                {
                    title: "表单管理",
                    icon: "grid",
                    url: "table"
                },
                {
                    title: "网站设置",
                    icon: "gear-a",
                    url: "setting"
                }
            ],
            pwdForm: {
                OldPassword: "",
                NewPassword: "",
                VerifyPassword: ""
            },
            pwdRules: {
                OldPassword: [
                    {
                        required: true,
                        message: "请输入原密码",
                        trigger: "blur"
                    }
                ],
                NewPassword: [
                    {
                        required: true,
                        message: "请输入4-20位的新密码",
                        trigger: "blur"
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (this.pwdForm.VerifyPassword !== "") {
                                this.$refs.pwdForm.validateField(
                                    "VerifyPassword"
                                );
                            }
                            callback();
                        },
                        trigger: "blur"
                    }
                ],
                VerifyPassword: [
                    {
                        required: true,
                        message: "请再次确认新密码",
                        trigger: "blur"
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.pwdForm.NewPassword) {
                                // 对第二个密码框单独验证
                                callback(new Error("2次密码输入不正确"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {
        rotateIcon() {
            return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
        },
        menuitemClasses() {
            return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
        },
        location() {
            return util.getCurrentPath(this.$route.name);
        },
        active() {
            return this.$route.name;
        }
    },
    methods: {
        collapsedSider() {
            this.$refs.side1.toggleCollapse();
        },
        handleLogOut() {
            //退出登录
            this.$router.push({ name: "login" });
        },
        editPassword() {
            //修改密码
        },
        handleCancel() {},
        handleSelectMenu(name) {
            this.$router.push({ name });
        }
    },
    mounted() {
        util.getCurrentPath(this.$route.name);
    }
};
</script>

<style scoped>
.layout {
    /* border: 1px solid #d7dde4; */
    background: #f5f7f9;
    position: relative;
    /* border-radius: 4px; */
    overflow: hidden;
}
.layout-header-bar {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    line-height: inherit;
}
.layout-header-bar .breadcrumb {
    display: inline-block;
    vertical-align: top;
    margin-top: 21px;
}
.layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}
.layout-logo {
    width: 200px;
    height: 64px;
    line-height: 64px;
    background: #5b6270;
    border-radius: 3px;
    position: relative;
    color: #fff;
    font-size: 14px;
    text-indent: 30px;
}
.menu-icon {
    transition: all 0.3s;
}
.rotate-icon {
    transform: rotate(-90deg);
}
.user-drop-down {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-right: 15px;
}
.user-drop-down::before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    height: 100%;
    width: 0;
}
.user-ivu-dropdown {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width 0.2s ease 0.2s;
}
.menu-item i {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
}
.collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
}
.layout-content {
    padding: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    overflow: auto;
}
.layout-footer-center {
    text-align: center;
    font-size: 12px;
}
</style>